<template>
  <div class="app-container">

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['station:price:add']"
        >新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          icon="el-icon-edit"
          size="mini"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['station:price:edit']"
        >修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['station:price:remove']"
        >删除</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['station:price:export']"
        >导出</el-button>
      </el-col>
    </el-row>

    <el-table v-loading="loading" :data="priceList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="车辆类型" align="center" prop="carType" :formatter="carTypeFormat" />
      <el-table-column label="营运">
          <el-table-column
            label="汽油"
            width="200">
            <el-table-column
              prop="yyQyPrice"
              label="价格"
              width="50">
            </el-table-column>
            <el-table-column
              prop="yyQyAdjPrice"
              label="调节价格"
              width="50">
            </el-table-column>
            <el-table-column
              prop="yyQyComm"
              label="代驾抽成"
              width="50">
            </el-table-column>
            <el-table-column
              prop="yyQyZjComm"
              label="自驾抽成"
              width="50">
            </el-table-column>
          </el-table-column>
          <el-table-column
            label="柴油"
            width="200">
            <el-table-column
              prop="yyCyPrice"
              label="价格"
              width="50">
            </el-table-column>
            <el-table-column
              prop="yyCyAdjPrice"
              label="调节价格"
              width="50">
            </el-table-column>
            <el-table-column
              prop="yyCyComm"
              label="代驾抽成"
              width="50">
            </el-table-column>
            <el-table-column
              prop="yyCyZjComm"
              label="自驾抽成"
              width="50">
            </el-table-column>
          </el-table-column>
          <el-table-column
            label="新能源-混动"
            width="200">
            <el-table-column
              prop="yyXnyHdPrice"
              label="价格"
              width="50">
            </el-table-column>
            <el-table-column
              prop="yyXnyHdAdjPrice"
              label="调节价格"
              width="50">
            </el-table-column>
            <el-table-column
              prop="yyXnyHdComm"
              label="代驾抽成"
              width="50">
            </el-table-column>
            <el-table-column
              prop="yyXnyHdZjComm"
              label="自驾抽成"
              width="50">
            </el-table-column>
          </el-table-column>
        <el-table-column
          label="新能源-纯电动"
          width="200">
          <el-table-column
            prop="yyXnyCddPrice"
            label="价格"
            width="50">
          </el-table-column>
          <el-table-column
            prop="yyXnyCddAdjPrice"
            label="调节价格"
            width="50">
          </el-table-column>
          <el-table-column
            prop="yyXnyCddComm"
            label="代驾抽成"
            width="50">
          </el-table-column>
          <el-table-column
            prop="yyXnyCddZjComm"
            label="自驾抽成"
            width="50">
          </el-table-column>
        </el-table-column>
      </el-table-column>
      <el-table-column label="非营运">
        <el-table-column
          label="汽油"
          width="200">
          <el-table-column
            prop="fyyQyPrice"
            label="价格"
            width="50">
          </el-table-column>
          <el-table-column
            prop="fyyQyAdjPrice"
            label="调节价格"
            width="50">
          </el-table-column>
          <el-table-column
            prop="fyyQyComm"
            label="代驾抽成"
            width="50">
          </el-table-column>
          <el-table-column
            prop="fyyQyZjComm"
            label="自驾抽成"
            width="50">
          </el-table-column>
        </el-table-column>
        <el-table-column
          label="柴油"
          width="200">
          <el-table-column
            prop="fyyCyPrice"
            label="价格"
            width="50">
          </el-table-column>
          <el-table-column
            prop="fyyCyAdjPrice"
            label="调节价格"
            width="50">
          </el-table-column>
          <el-table-column
            prop="fyyCyComm"
            label="代驾抽成"
            width="50">
          </el-table-column>
          <el-table-column
            prop="fyyCyZjComm"
            label="自驾抽成"
            width="50">
          </el-table-column>
        </el-table-column>
        <el-table-column
          label="新能源-混动"
          width="200">
          <el-table-column
            prop="fyyXnyHdPrice"
            label="价格"
            width="50">
          </el-table-column>
          <el-table-column
            prop="fyyXnyHdAdjPrice"
            label="调节价格"
            width="50">
          </el-table-column>
          <el-table-column
            prop="fyyXnyHdComm"
            label="代驾抽成"
            width="50">
          </el-table-column>
          <el-table-column
            prop="fyyXnyHdZjComm"
            label="自驾抽成"
            width="50">
          </el-table-column>
        </el-table-column>
        <el-table-column
          label="新能源-纯电动"
          width="200">
          <el-table-column
            prop="fyyXnyCddPrice"
            label="价格"
            width="50">
          </el-table-column>
          <el-table-column
            prop="fyyXnyCddAdjPrice"
            label="调节价格"
            width="50">
          </el-table-column>
          <el-table-column
            prop="fyyXnyCddComm"
            label="代驾抽成"
            width="50">
          </el-table-column>
          <el-table-column
            prop="fyyXnyCddZjComm"
            label="自驾抽成"
            width="50">
          </el-table-column>
        </el-table-column>
      </el-table-column>
      <el-table-column label="创建时间" align="center" prop="gmtTime" width="150">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.gmtTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['station:price:edit']"
          >修改</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['station:price:remove']"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改检测站价格体系对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="1100px" v-dialogdrag append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="车辆类型">
          <el-select v-model="form.carType" placeholder="请选择车辆类型">
            <el-option
              v-for="dict in carTypeOptions"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="parseInt(dict.dictValue)"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-row>
          <el-col :span="3">
            <el-form-item label="营运-汽油" label-width="100" prop="yyQy">
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="价格" label-width="50" prop="yyQyPrice">
              <el-input-number v-model="form.yyQyPrice" placeholder="请输入价格"  :step="1" :min="10"
                               :max="1000" size="small"/>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="调节价格" label-width="50" prop="yyQyAdjPrice">
              <el-input-number v-model="form.yyQyAdjPrice" placeholder="调节价格"  :step="1" :min="-200"
                               :max="1000" size="small"/>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="代驾抽成" label-width="50" prop="yyQyComm">
              <el-input-number v-model="form.yyQyComm" placeholder="代驾抽成"  :step="1" :min="0"
                               :max="1000" size="small"/>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="自驾抽成" label-width="50" prop="yyQyZjComm">
              <el-input-number v-model="form.yyQyZjComm" placeholder="自驾抽成"  :step="1" :min="0"
                               :max="1000" size="small"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="3">
            <el-form-item label="营运-柴油" label-width="100" prop="yyCy">
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="价格" label-width="100" prop="yyCyPrice">
              <el-input-number v-model="form.yyCyPrice" placeholder="价格"  :step="1" :min="10"
                               :max="1000" size="small"/>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="调节价格" label-width="100" prop="yyCyAdjPrice">
              <el-input-number v-model="form.yyCyAdjPrice" placeholder="调节价格"  :step="1" :min="-200"
                               :max="1000" size="small"/>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="代驾抽成" label-width="100" prop="yyCyComm">
              <el-input-number v-model="form.yyCyComm" placeholder="代驾抽成"  :step="1" :min="0"
                               :max="1000" size="small"/>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="自驾抽成" label-width="100" prop="yyCyZjComm">
              <el-input-number v-model="form.yyCyZjComm" placeholder="自驾抽成"  :step="1" :min="0"
                               :max="1000" size="small"/>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="3">
            <el-form-item label="营运-混动" label-width="100" prop="yyXnyHd">
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="价格" label-width="100" prop="yyXnyHdPrice">
              <el-input-number v-model="form.yyXnyHdPrice" placeholder="价格"  :step="1" :min="10"
                               :max="1000" size="small"/>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="调节价格" label-width="100" prop="yyXnyHdAdjPrice">
              <el-input-number v-model="form.yyXnyHdAdjPrice" placeholder="调节价格"  :step="1" :min="-200"
                               :max="1000" size="small"/>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="代驾抽成" label-width="100" prop="yyXnyHdComm">
              <el-input-number v-model="form.yyXnyHdComm" placeholder="代驾抽成"  :step="1" :min="0"
                               :max="1000" size="small"/>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="自驾抽成" label-width="100" prop="yyXnyHdZjComm">
              <el-input-number v-model="form.yyXnyHdZjComm" placeholder="自驾抽成"  :step="1" :min="0"
                               :max="1000" size="small"/>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="3">
            <el-form-item label="营运-纯电动" label-width="100" prop="yyXnyCdd">
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="价格" label-width="100" prop="yyXnyCddPrice">
              <el-input-number v-model="form.yyXnyCddPrice" placeholder="价格"   :step="1" :min="10"
                               :max="1000" size="small"/>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="调节价格" label-width="100" prop="yyXnyCddAdjPrice">
              <el-input-number v-model="form.yyXnyCddAdjPrice" placeholder="调节价格"   :step="1" :min="-200"
                               :max="1000" size="small"/>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="代驾抽成" label-width="100" prop="yyXnyCddComm">
              <el-input-number v-model="form.yyXnyCddComm" placeholder="代驾抽成"   :step="1" :min="0"
                               :max="1000" size="small"/>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="自驾抽成" label-width="100" prop="yyXnyCddZjComm">
              <el-input-number v-model="form.yyXnyCddZjComm" placeholder="自驾抽成"   :step="1" :min="0"
                               :max="1000" size="small"/>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="3">
            <el-form-item label="非营运-汽油" label-width="100" prop="fyyQy">
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="价格" label-width="100" prop="fyyQyPrice">
              <el-input-number v-model="form.fyyQyPrice" placeholder="价格"  :step="1" :min="10"
                               :max="1000" size="small"/>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="调节价格" label-width="100" prop="fyyQyAdjPrice">
              <el-input-number v-model="form.fyyQyAdjPrice" placeholder="调节价格"  :step="1" :min="-200"
                               :max="1000" size="small"/>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="代驾抽成" label-width="100" prop="fyyQyComm">
              <el-input-number v-model="form.fyyQyComm" placeholder="代驾抽成"  :step="1" :min="0"
                               :max="1000" size="small"/>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="自驾抽成" label-width="100" prop="fyyQyZjComm">
              <el-input-number v-model="form.fyyQyZjComm" placeholder="自驾抽成"  :step="1" :min="0"
                               :max="1000" size="small"/>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="3">
            <el-form-item label="非营运-柴油" label-width="100" prop="fyyCy">
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="价格" label-width="100" prop="fyyCyPrice">
              <el-input-number v-model="form.fyyCyPrice" placeholder="价格"  :step="1" :min="10"
                               :max="1000" size="small"/>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="调节价格" label-width="100" prop="fyyCyAdjPrice">
              <el-input-number v-model="form.fyyCyAdjPrice" placeholder="调节价格"  :step="1" :min="-200"
                               :max="1000" size="small"/>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="代驾抽成" label-width="100" prop="fyyCyComm">
              <el-input-number v-model="form.fyyCyComm" placeholder="代驾抽成"  :step="1" :min="0"
                               :max="1000" size="small"/>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="自驾抽成" label-width="100" prop="fyyCyZjComm">
              <el-input-number v-model="form.fyyCyZjComm" placeholder="自驾抽成"  :step="1" :min="0"
                               :max="1000" size="small"/>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="3">
            <el-form-item label="非营运-混动" label-width="100" prop="fyyXnyHd">
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="价格" label-width="100" prop="fyyXnyHdPrice">
              <el-input-number v-model="form.fyyXnyHdPrice" placeholder="价格"  :step="1" :min="10"
                               :max="1000" size="small"/>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="调节价格" label-width="100" prop="fyyXnyHdAdjPrice">
              <el-input-number v-model="form.fyyXnyHdAdjPrice" placeholder="调节价格"  :step="1" :min="-200"
                               :max="1000" size="small"/>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="代驾抽成" label-width="100" prop="fyyXnyHdComm">
              <el-input-number v-model="form.fyyXnyHdComm" placeholder="代驾抽成"  :step="1" :min="0"
                               :max="1000" size="small"/>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="自驾抽成" label-width="100" prop="fyyXnyHdZjComm">
              <el-input-number v-model="form.fyyXnyHdZjComm" placeholder="自驾抽成"  :step="1" :min="0"
                               :max="1000" size="small"/>
            </el-form-item>
          </el-col>
        </el-row>


        <el-row>
          <el-col :span="3">
            <el-form-item label="非营运-纯电动" label-width="120" prop="fyyXnyCdd">
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="价格" label-width="100" prop="fyyXnyCddPrice">
              <el-input-number v-model="form.fyyXnyCddPrice" placeholder="价格"  :step="1" :min="10"
                               :max="1000" size="small"/>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="调节价格" label-width="100" prop="fyyXnyCddAdjPrice">
              <el-input-number v-model="form.fyyXnyCddAdjPrice" placeholder="调节价格"  :step="1" :min="-200"
                               :max="1000" size="small"/>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="代驾抽成" label-width="100" prop="fyyXnyCddComm">
              <el-input-number v-model="form.fyyXnyCddComm" placeholder="代驾抽成"  :step="1" :min="0"
                               :max="1000" size="small"/>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="自驾抽成" label-width="100" prop="fyyXnyCddZjComm">
              <el-input-number v-model="form.fyyXnyCddZjComm" placeholder="自驾抽成"  :step="1" :min="0"
                               :max="1000" size="small"/>
            </el-form-item>
          </el-col>
        </el-row>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listPrice, getPrice, delPrice, addPrice, updatePrice, exportPrice } from "@/api/station/price";

export default {
  name: "Price",
  props: {
    stationId: {
      type: Number
    }
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 总条数
      total: 0,
      // 检测站价格体系表格数据
      priceList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 车辆类型字典
      carTypeOptions: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        stationId: this.stationId,
        carType: undefined,
        yyQyPrice: undefined,
        yyCyPrice: undefined,
        yyXnyHdPrice: undefined,
        yyXnyCddPrice: undefined,
        fyyQyPrice: undefined,
        fyyCyPrice: undefined,
        fyyXnyHdPrice: undefined,
        fyyXnyCddPrice: undefined,
        yyQyComm: undefined,
        yyCyComm: undefined,
        yyXnyHdComm: undefined,
        yyXnyCddComm: undefined,
        fyyQyComm: undefined,
        fyyCyComm: undefined,
        fyyXnyHdComm: undefined,
        fyyXnyCddComm: undefined,
        gmtTime: undefined,
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        stattionId: [
          { required: true, message: "检测站id不能为空", trigger: "blur" }
        ],
        carType: [
          { required: true, message: "车辆类型不能为空", trigger: "blur" }
        ],
      }
    };
  },
  created() {
    this.getList();
    this.getDicts("car_type").then(response => {
      this.carTypeOptions = response.data;
    });
  },
  methods: {
    /** 查询检测站价格体系列表 */
    getList() {
      this.loading = true;
      listPrice(this.queryParams).then(response => {
        this.priceList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 车辆类型字典翻译
    carTypeFormat(row, column) {
      return this.selectDictLabel(this.carTypeOptions, row.carType);
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: undefined,
        stationId: this.stationId,
        carType: undefined,
        yyQyPrice: undefined,
        yyCyPrice: undefined,
        yyXnyHdPrice: undefined,
        yyXnyCddPrice: undefined,
        fyyQyPrice: undefined,
        fyyCyPrice: undefined,
        fyyXnyHdPrice: undefined,
        fyyXnyCddPrice: undefined,
        yyQyComm: undefined,
        yyCyComm: undefined,
        yyXnyHdComm: undefined,
        yyXnyCddComm: undefined,
        fyyQyComm: undefined,
        fyyCyComm: undefined,
        fyyXnyHdComm: undefined,
        fyyXnyCddComm: undefined,
        gmtTime: undefined,
        updateTime: undefined,
        createBy: undefined,
        updateBy: undefined,
        yyQyAdjPrice: undefined,
        yyCyAdjPrice: undefined,
        yyXnyHdAdjPrice: undefined,
        yyXnyCddAdjPrice: undefined,
        fyyQyAdjPrice: undefined,
        fyyCyAdjPrice: undefined,
        fyyXnyHdAdjPrice: undefined,
        fyyXnyCddAdjPrice: undefined,
        yyQyZjComm: undefined,
        yyCyZjComm: undefined,
        yyXnyHdZjComm: undefined,
        yyXnyCddZjComm: undefined,
        fyyQyZjComm: undefined,
        fyyCyZjComm: undefined,
        fyyXnyHdZjComm: undefined,
        fyyXnyCddZjComm: undefined,

      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length!=1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加检测站价格体系";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const id = row.id || this.ids
      getPrice(id).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "修改检测站价格体系";
      });
    },
    /** 提交按钮 */
    submitForm: function() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != undefined) {
            updatePrice(this.form).then(response => {
              if (response.code === 200) {
                this.msgSuccess("修改成功");
                this.open = false;
                this.getList();
              } else {
                this.msgError(response.msg);
              }
            });
          } else {
            addPrice(this.form).then(response => {
              if (response.code === 200) {
                this.msgSuccess("新增成功");
                this.open = false;
                this.getList();
              } else {
                this.msgError(response.msg);
              }
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$confirm('是否确认删除检测站价格体系编号为"' + ids + '"的数据项?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
          return delPrice(ids);
        }).then(() => {
          this.getList();
          this.msgSuccess("删除成功");
        }).catch(function() {});
    },
    /** 导出按钮操作 */
    handleExport() {
      const queryParams = this.queryParams;
      this.$confirm('是否确认导出所有检测站价格体系数据项?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
          return exportPrice(queryParams);
        }).then(response => {
          this.download(response.msg);
        }).catch(function() {});
    }
  }
};
</script>
